<template>
  <div style="display: flex;flex-direction: column;width: 100%;">
    <div class="part1">
      <a @click="loginMethod()">
        <div class="headBox"><img style="width: 100%; height: 100%;background-color: white;" :src="headImg"/></div>
        <span id="userName">点击授权</span>
      </a>
    </div>
    <ul class="part2">
      <li><a @click="myOrder"><span><i class="el-icon-s-order"></i>我的订单</span><i class="el-icon-arrow-right"></i></a></li>
      <li><a @click="myAddress"><span><i class="el-icon-position"></i>收货地址</span><i class="el-icon-arrow-right"></i></a></li>
    </ul>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose" style="width: 100%;">
      <span>此操作将退出登录是否继续, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="loginOut">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="loginDialogVisible"
      :before-close="closeDialog" style="width: 100%;">
      <span>请先登录</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="goLoginPage">登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
  	name: "",
  	components: {
  	},
  	data() {
  		return {
        user:{},
        headImg: '../../../../../static/whiteHead.png',
        dialogVisible: false,
        loginDialogVisible:false,
  		}
  	},

    mounted() {
      this.renderingMethod()
    },
    methods:{
      //判断是否登录方法
      isLogin(){
        this.user = JSON.parse(sessionStorage.getItem("visitor"));
        if(this.user == null || this.user == {}){
          return false
        }
        return true;
      },

      //置空方法
      nullData(){
        document.getElementById("userName").innerHTML = '点击授权'
        this.headImg = '../../../../../static/whiteHead.png'
      },

      //登录渲染方法
      renderingMethod(){
        this.user = JSON.parse(sessionStorage.getItem("visitor"));
        // console.log(this.user)
        if(this.user!=null){
          this.headImg = this.user.headPhoto
          document.getElementById("userName").innerHTML = this.user.userName
        }
      },

      //我的订单
      myOrder(){
        //判断用户是否登录
        if(this.isLogin()){
          sessionStorage.setItem("lastPage","/home/mine")
          this.$router.push({
            path: "/myOrder"
          });
        }else{
          this.loginDialogVisible = true;
        }
      },
      //收货地址
      myAddress(){
        //判断用户是否登录
        if(this.isLogin()){
          sessionStorage.setItem("lastPage","/home/mine")
          this.$router.push({
            path: "/addressManage"
          });
        }else{
          this.loginDialogVisible = true;
        }
      },
      //跳转登录页面
      goLoginPage(){
          sessionStorage.setItem("lastPage","/home/mine")
          this.$router.push({
            path: "/userLogin"
          });
      },

      //登录方法
      loginMethod(){
        let user = sessionStorage.getItem("visitor");
        if(user!=null){
          console.log("用户已登录")
          // this.open()
          this.dialogVisible = true;
        }else{
          //设置跳转页面的返回页面地址
          sessionStorage.setItem("lastPage","/home/mine")
          this.$router.push({
            path: "/userLogin"
          });
        }
      },
      closeDialog(){
        this.loginDialogVisible = false;
      },
      //关闭退出登录对话框方法
      handleClose(done) {
          this.dialogVisible = false;
      },
      //退出登录方法
      loginOut(){
        var self = this
        var visitor = JSON.parse(sessionStorage.getItem("visitor"));
        console.log(visitor)
        this.$http.post("/api/CakeShop/userLoginOut",
        	visitor
        ).then(
          function(res) {
            self.$message({
            	duration: 1500,
            	message: "退出成功!",
            	type: "success",
            	onClose: function() {
                sessionStorage.removeItem("visitor")
                self.dialogVisible = false
                self.$router.push({
                  path: "/home/mine"
                });
                self.nullData()
            	},
            });
          }
        );
      }
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
  }
  .part1 a{
    display: flex;
    height: 200px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .part1 .headBox{
    width: 70px;
    height: 70px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    overflow: hidden;
  }
  .part1 #userName{
    border: 1px solid #f1f1f1;
    padding: 3px 10px;
    margin-top: 5px;
    border-radius: 10px;
    color: #732808;
  }
  .part2{
    display: flex;
    height: 80px;
    flex-direction: column;
    /* justify-content: space-around; */
    margin: 10px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    color: #732808;
  }
  .part2 li{
    flex: 1;
    border-bottom: 1px solid #efefef;
  }
  .part2 :last-child{
    border-bottom: none;
  }
  .part2 li a{
    display: flex;
    height: 100%;
    padding: 0 15px;
    align-items: center;
    justify-content: space-between;
    color: #732808;
  }
  .part2 li a span i{
    margin-right: 3px;
  }
</style>
